<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理系统</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  <!-- 引入 Font Awesome 图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="d-flex">
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="p-4 border-bottom d-flex align-items-center justify-content-between">
      <h3 class="nav-text mb-0">管理系统</h3>
      <button class="btn text-white" id="toggleSidebar">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <ul class="nav flex-column mt-3">
      <li class="nav-item">
        <a class="nav-link" href="/home">
          <i class="fa fa-home"></i>
          <span class="nav-text">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/dashboard">
          <i class="fa fa-dashboard"></i>
          <span class="nav-text">仪表盘</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/users">
          <i class="fa fa-users"></i>
          <span class="nav-text">用户管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/products">
          <i class="fa fa-shopping-bag"></i>
          <span class="nav-text">产品管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/orders">
          <i class="fa fa-file-text-o"></i>
          <span class="nav-text">订单管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/settings">
          <i class="fa fa-cog"></i>
          <span class="nav-text">系统设置</span>
        </a>
      </li>
    </ul>
  </div>

  <!-- 主内容区 -->
  <div class="main-content ms-0 ms-md-250">
    <!-- 顶部导航 -->
    <nav class="top-nav py-3 px-4 d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <button class="btn me-3 d-md-none" id="mobileToggle">
          <i class="fa fa-bars"></i>
        </button>
        <h5 class="mb-0">{% block page_title %}仪表盘{% endblock %}</h5>
      </div>
      <div class="d-flex align-items-center">
        <!-- 通知图标 -->
        <div class="me-3 position-relative">
          <i class="fa fa-bell-o text-secondary"></i>
          <span class="position-absolute top-0 right-0 w-2 h-2 bg-danger rounded-circle"></span>
        </div>

        <!-- 用户信息与操作：修改点击用户名跳转系统设置 -->
        {% if current_user.is_authenticated %}
          <div class="d-flex align-items-center">
            <img src="https://gips3.baidu.com/it/u=1761823962,2099797246&fm=3074&app=3074&f=PNG?w=2048&h=2048"
                 class="rounded-circle me-2" width="40" height="40" alt="用户头像">
            <!-- 核心修改：给用户名添加跳转链接到系统设置 -->
            <div class="dropdown">
              <!-- 点击用户名文字直接跳转到/settings -->
              <a href="/settings" class="d-none d-md-inline dropdown-toggle" data-bs-toggle="dropdown">
                {{ current_user.username }}
              </a>
              <!-- 移动端/下拉菜单保留原有功能 -->
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/settings">个人设置</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">退出登录</a></li>
              </ul>
            </div>
          </div>
        {% else %}
          <!-- 未登录状态 -->
          <a href="{{ url_for('auth.login') }}" class="btn btn-outline-primary">登录</a>
        {% endif %}
      </div>
    </nav>

    <!-- 消息提示区域 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="px-4 py-2">
          {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <!-- 页面内容 -->
    {% block content %}{% endblock %}

  </div>
</div>

<!-- 引入 Bootstrap 5 JS 和 Popper -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<!-- 自定义脚本 -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>